<template>
   <div class="update_birthday">
      <!-- currentDate 双向绑定了日期选择器
         设置日期选择器的默认值
         同步日期选择器选择的日期 
         min-date 可选的最小日期
         max-date 可选的最大日期
         -->
      <van-datetime-picker
         v-model="currentDate"
         type="date"
         title="选择年月日"
         :min-date="minDate"
         :max-date="maxDate"
         @confirm="onConfirm"
         @cancel="$emit('close')"
      />
   </div>
</template>

<script>
import { updateUserProfile } from '@/api/user'
import dayjs from 'dayjs'
export default {
   name: 'Update_birthday',
   data() {
      return {
         // 如果不设定最大和最小值，那么默认当前事件 + 或 - 10 年
         minDate: new Date(1970, 0, 1),
         maxDate: new Date(),
         currentDate: new Date(this.value)
      }
   },
   props: {
      value: {
         type: String,
         required: true
      }
   },
   methods: {
      async onConfirm() {
         this.$toast.loading({
            message: '保存中...',
            forbidClick: true,
            // 持续展示
            duration: 0
         })
         try {
            const currentDate = dayjs(
               this.currentDate
            ).format('YYYY-MM-DD')
            await updateUserProfile({
               birthday: currentDate
            })
            // console.log(data)
            // 更新视图
            this.$emit('input', currentDate)
            // 关闭弹层
            this.$emit('close')
            this.$toast.success('更新成功')
         } catch (err) {
            this.$toast.fail('修改失败')
         }
      }
   }
}
</script>

<style lang="less" scoped></style>
